<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <script>
        var map; //地图类对象
        var snake; //蛇类对象
        var food; //食物类对象
        var timer; //定时器对象
        var sum=0; //分数

        //地图类
        function Map()
        {
            this.width=800; //地图宽度
            this.height=400; //地图高度
            this.position='absolute'; //定位方式
            this.color='#cccccc'; //地图颜色
            this._map=null; //保存地图dom元素

            this.show=function()
            {
                //用于显示地图
                //创建地图div元素
                this._map = document.createElement('div');
                //设置地图样式
                this._map.style.width = this.width + 'px';
                this._map.style.height = this.height + 'px';
                this._map.style.position = this.position ;
                this._map.style.backgroundColor = this.color ;

                //将地图div元素追加到body标签之间
                document.getElementsByTagName('body')[0].appendChild(this._map);
            };
        }

        //食物类
        function Food()
        {
            this.width=20; //宽度
            this.height=20; //高度
            this.position='absolute'; //定位方式
            this.color='#00ff00'; //食物颜色
            this._food=null; //用于保存食物dom元素
            this.x=0; //横向第几个格
            this.y=0; //纵向第几个格

            this.show=function()
            {
                //用于显示食物
                if(this._food==null)
                {
                    this._food=document.createElement('div');

                    //设置食物样式
                    this._food.style.width = this.width + 'px';
                    this._food.style.height = this.height + 'px';
                    this._food.style.position = this.position ;
                    this._food.style.backgroundColor = this.color ;

                    map._map.appendChild(this._food);
                }
                //如果之前创建过，只需要重新设置坐标
                this.x=Math.floor(Math.random()*40);
                this.y=Math.floor(Math.random()*20);
                this._food.style.left = this.x*this.width+'px';
                this._food.style.top = this.y*this.height+'px';
            };
        }

        //蛇类
        function Snake()
        {
            this.width=20;    //蛇节宽度
            this.height=20;    //蛇节高度
            this.position='absolute'; //蛇节定位方式
            this.direct=''; //蛇的移动方向
            //所有蛇节全部信息
            this.body=[[3,2,'red',null],[2,2,'blue',null],[1,2,'blue',null]];

            this.setDirect = function(code)
            {
                switch(code)
                {
                    case 37:
                        this.direct='left';
                        break;
                    case 38:
                        this.direct='up';
                        break;
                    case 39:
                        this.direct='right';
                        break;
                    case 40:
                        this.direct='down';
                        break;
                }
            }

            this.show=function()
            {
                //用于显示蛇
                for(var i=0;i<this.body.length;i++) {
                    if(this.body[i][3]==null) {
                        this.body[i][3] = document.createElement('div');
                        this.body[i][3].style.width = this.width +'px';
                        this.body[i][3].style.height = this.height +'px';
                        this.body[i][3].style.position = this.position;
                        this.body[i][3].style.backgroundColor = this.body[i][2];
                        map._map.appendChild(this.body[i][3]);
                    }
                    //设置蛇节的横纵坐标
                    this.body[i][3].style.left=this.body[i][0]*this.width+'px';
                    this.body[i][3].style.top=this.body[i][1]*this.height+'px';
                }
            }

            this.move = function()
            {
                //移动蛇身
                var length = this.body.length-1;
                for(var i=length;i>0;i--)
                {
                    //让后面的蛇节的坐标等于前面蛇节的坐标
                    this.body[i][0]=this.body[i-1][0]; //横坐标
                    this.body[i][1]=this.body[i-1][1]; //纵坐标

                }
                switch(this.direct)
                {
                    case 'right':
                        this.body[0][0]=this.body[0][0]+1;
                        break;
                    case 'down':
                        this.body[0][1]=this.body[0][1]+1;
                        break;
                    case 'left':
                        this.body[0][0]=this.body[0][0]-1;
                        break;
                    case 'up':
                        this.body[0][1]=this.body[0][1]-1;
                        break;
                    default:
                        return;
                }

                //判断蛇吃到食物
                if(this.body[0][0]==food.x&&this.body[0][1]==food.y)
                {
                    var x=this.body[length][0];
                    var y=this.body[length][1];
                    sum++;
                    document.title='分数:'+sum+'分';
                    this.body.push([x,y,'blue',null]);
                    food.show();
                }

                //判断撞墙死
                if(this.body[0][0]<0 || this.body[0][0]>39 ||this.body[0][1]<0 ||this.body[0][1]>19)
                {
                    alert('撞墙死');
                    clearTimeout(timer);
                    return;
                }

                //吃到自己死
                for(var i=1;i<this.body.length;i++)
                {
                    if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1])
                    {
                        alert('吃到自己死');
                        clearTimeout(timer);
                        return;
                    }
                }

                this.show();
            }
        }

        window.onload = function()
        {
            map = new Map(); //实例化地图类对象
            map.show();    //显示地图


            food=new Food(); //实例化食物类对象
            food.show(); //显示食物

            snake = new Snake(); //实例化蛇类对象
            snake.show();
            timer = setInterval('snake.move()',100);

            document.onkeydown = function()
            {
                var code;
                if(window.event)
                {
                    code=window.event.keyCode;
                }else
                {
                    code = event.keyCode;
                }
                snake.setDirect(code);
            };


        }
    </script>
</head>
<body>

</body>
</html>